<template>
	<view class="guid-nav flex-row-center">
		
		<view class="footer-icon" >
			<!-- <image src="/static/icon/share.png" mode=""  ></image> -->
			<image :src="userInfo.imgUrl" mode="aspectFill"  ></image>
			
		</view>
		<view class="footer-icon" >
			<!-- <text>ww发送</text>
			<text>撒旦发射点</text> -->
			<text>{{userInfo.name}}</text>
			<text>{{userInfo.position}}</text>
		</view>
		<view class="footer-btn">
			<button class="flex-col-center" @click="buttonClick">
				
				<image src="/static/icon/call.png" mode="" ></image>
				电话咨询
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:'guid-nav',
		props:{
			userInfo:{
				type:Object,
				defalut:{}
			},
			
		},
		data(){
			return {
				
			}
		},
		methods:{
			
			
			buttonClick(){
				console.log('this.userinfo',this.userInfo)
				const self = this;
				uni.showActionSheet({
					itemList:[`${this.userInfo.phone} ${this.userInfo.name}`],
					success:function(res) {
						if (res.tapIndex === 0) {
							uni.makePhoneCall({
							   phoneNumber: self.userInfo.phone,
							   success:function(res){
								   console.log('succse',res)
							   },
							   fail:function(res){
								   console.log('fail',res)
							   }
							});
						}
					},
					fail:function(err){
						
					}
				})
					
			}
		}
	}
</script>

<style scoped lang="scss">
	.guid-nav{
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: calc(112rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
		// display: flex;
		.footer-icon {
			
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			
			&:nth-of-type(2) {
				margin-left: 20rpx;
				margin-right: 46rpx;
			}
			image {
				width: 72rpx;
				height: 72rpx;
				margin-left: 20rpx;
				border-radius: 20rpx;
				
			}
			text {
				font-size: $text-size;
				
				color: #656371;
				&:first-child{
					font-weight: $Semibold;
					font-size: 32rpx;
				}
			}

		}
		.footer-btn {
			flex:1;
			margin-left: 20rpx;
			margin-right: 20rpx;
			button {
				// width: 484rpx;
				height: 92rpx;
				background: #05C160;
				border-radius: 100rpx;
				font-size: 28rpx;
				font-weight: $Semibold;
				color: #FFFFFF;
			}
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>